<template>
	<view class="main">
		<view class="h">
			<view class="text">
				<view class="title">待支付</view>
				<view class="subT">请在15分钟内完成支付...</view>
			</view>
			<image src="https://crmebpros.oss-cn-beijing.aliyuncs.com/attach/2024/09/ab063202409261724026410.png">
			</image>
		</view>
		<view class="address">
			<view class="info">
				<u-icon name="weizhi-xianxing" customPrefix="custom-icon"></u-icon>
				<text style="margin-left: 6px; ">周先华</text>
				<text style="margin-left: 10px;">17304848274</text>
			</view>
			<view class="loc">
				北京市 市辖区 东城区 东华门街道 打我的
			</view>
			<image class="line" src="https://pro.crmeb.net/static/images/line.jpg"></image>
		</view>
	</view>
	<view class="bg"></view>
</template>

<script setup>
</script>

<style lang="scss">
	.main {
		padding: 0 10px;
		z-index: 80;
		position: relative;

		.h {
			height: 85px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				padding-left: 6px;
				flex: 1 1 0%;
				color: #fff;

				.title {
					font-size: 19px;
					font-weight: 500;
				}

				.subT {
					font-size: 13px;
					margin-top: 4px;
				}
			}

			image {
				width: 74px;
				height: 74px;
			}

		}

		.address {
			z-index: 1;
			padding: 17px;
			position: relative;
			background-color: #fff;
			border-radius: 12px;

			.info {
				display: flex;
				// justify-content: space-between;
				// align-items: center;
				font-weight: 500;
				display: flex;
				align-items: center;
				font-size: 16px;
			}

			.loc {
				padding-bottom: 4px;
				margin-top: 6px;
				width: 100%;
				color: #999;
				font-size: 12px;
			}

			.line {
				height: 1px;
				width: 340px;
				left: 50%;
				transform: translateX(-50%);
				position: absolute;
				bottom: 0;
			}
		}
	}

	.bg {
		width: 100%;
		height: 213px;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, #e93323, #FF7931);
	}
</style>